<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../css/index.css" />
  <link rel="stylesheet" type="text/css" href="../css/reset.css" />
  <style>
    #loader {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      background: #FFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  </style>
</head>

<body>
  <!-- loader -->
  <div id="loader">
    <div class="spinner-border text-primary" role="status">
      <img src="../img/loader-08.svg" alt="">
    </div>
  </div>
  <!-- * loader -->
  <!-- 头部搜索选择区 -->
  <div class="title">
    <p class="titText">临汾市促投局招商管理系统</p>
    <div class="selectNav">
      <div class="dropdown">
        <div class="btn">
          临汾市
          <img src="../img/bottomjiantou.svg" alt="" />
        </div>
      </div>
      <input class="searchBox" type="text" placeholder="项目、咨询、招商" />
    </div>
  </div>
  <!-- 中部导航金刚区 -->
  <div class="centerNav">
    <div class="nav">
      <img src="../img/nav1.svg" alt="" />
      <span>市县概况</span>
    </div>
    <div class="nav">
      <dotlottie-player autoplay controls loop mode="normal" src="../svg/zhaoshangdongtai.lottie"
        style="width: 50px; height: 50px; overflow: hidden"></dotlottie-player>
      <span>招商快讯 </span>
    </div>
    <div class="nav">
      <img src="../img/nav3.svg" alt="" />
      <span>我要投资</span>
    </div>
    <div class="nav">
      <img src="../img/nav4.svg" alt="" />
      <span>我要咨询</span>
    </div>
    <div class="nav">
      <img src="../img/nav5.svg" alt="" />
      <span>投资成本</span>
    </div>
    <div class="nav">
      <img src="../img/nav6.svg" alt="" />
      <span>优惠政策</span>
    </div>
    <div class="navs nav">
      <dotlottie-player autoplay controls loop mode="normal" src="../svg/2023.lottie" style="
            width: 32px;
            height: 15px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 5px;
          "></dotlottie-player>
      <img src="../img/nav7.svg" alt="" />
      <span>招商项目</span>
    </div>
    <div class="nav">
      <img src="../img/nav8.svg" alt="" />
      <span>服务机构</span>
    </div>
  </div>
  <!-- 内容详情区域 -->
  <!-- 项目概况 -->
  <div class="itemState">
    <div class="itemTitle">
      <div class="itemTitleLeft">
        <div class="kong"></div>
        <span class="itemName">项目概况</span>
      </div>
      <!-- 跳转全部 -->
      <div class="itemTitleRight">
        <span class="itemAll">全部</span>
        <img src="../img/right.svg" alt="" />
      </div>
    </div>
    <div class="itemContent">
      <div class="mouhua">
        <p class="mouhuaName">谋划项目</p>
        <span class="mouhuaNum">23</span>
        <img class="itemTitleRight_img" src="../img/mouhua.svg" alt="" />
      </div>
      <div class="itemContent_right">
        <div class="zaitan">
          <div class="zaitan_content">
            <span>在谈项目</span>
            <p>5</p>
          </div>
          <img src="../img/zaitan.svg" alt="" />
        </div>
        <div class="qianyue">
          <div class="qianyue_content">
            <span>签约项目</span>
            <p>16</p>
          </div>
          <img src="../img/qianyue.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
  <!-- 重大项目 -->
  <div class="bigItem">
    <div class="itemTitle">
      <div class="itemTitleLeft">
        <div class="kong"></div>
        <span class="itemName">重大项目</span>
        <dotlottie-player autoplay controls loop mode="normal" src="../svg/yitouzi.lottie"
          style="width: 70px; height: 20px; overflow: hidden"></dotlottie-player>
      </div>
      <!-- 跳转全部 -->
      <div class="itemTitleRight">
        <span class="itemAll">全部</span>
        <img src="../img/right.svg" alt="" />
      </div>
    </div>
    <div class="bigItemContent">
      <div id="main" style="height: 50px; width: 50px"></div>
      <div class="bigItemContents">
        <div class="bigItemNum">6</div>
        <div class="bigItemNums">
          <div class="bigItemColor1 bigItemColor"></div>
          <div class="bigItemColorNum">3-5亿</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">12</div>
        <div class="bigItemNums">
          <div class="bigItemColor2 bigItemColor"></div>
          <div class="bigItemColorNum">5-10亿</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">3</div>
        <div class="bigItemNums">
          <div class="bigItemColor3 bigItemColor"></div>
          <div class="bigItemColorNum">10亿以上</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 资金到位情况 -->
  <div class="bigItem">
    <div class="itemTitle">
      <div class="itemTitleLeft">
        <div class="kong"></div>
        <span class="itemName">资金到位情况</span>
      </div>
      <!-- 跳转全部 -->
      <div class="itemTitleRight">
        <span class="itemAll">全部</span>
        <img src="../img/right.svg" alt="" />
      </div>
    </div>
    <div class="bigItemMoney">
      <div id="wp1" style="height: 50px; width: 50px"></div>
      <div class="bigItemContents">
        <div class="bigItemNum">6</div>
        <div class="bigItemNums">
          <div class="bigItemColor1 bigItemColor"></div>
          <div class="bigItemColorNum">固定资产投资</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">12</div>
        <div class="bigItemNums">
          <div class="bigItemColor2 bigItemColor"></div>
          <div class="bigItemColorNum">非固定资产投资</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 招商类别 -->
  <div class="zhCategory">
    <div class="itemTitle">
      <div class="itemTitleLeft">
        <div class="kong"></div>
        <span class="itemName">招商类别</span>
      </div>
      <!-- 跳转全部 -->
      <div class="itemTitleRight">
        <span class="itemAll">全部</span>
        <img src="../img/right.svg" alt="" />
      </div>
    </div>
    <div class="bigItemContent">
      <div id="wp2" style="height: 50px; width: 50px"></div>
      <div class="bigItemContents">
        <div class="bigItemNum">6</div>
        <div class="bigItemNums">
          <div class="bigItemColor1 bigItemColor"></div>
          <div class="bigItemColorNum">融资招商</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">8</div>
        <div class="bigItemNums">
          <div class="bigItemColor2 bigItemColor"></div>
          <div class="bigItemColorNum">楼宇招商</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">11</div>
        <div class="bigItemNums">
          <div class="bigItemColor3 bigItemColor"></div>
          <div class="bigItemColorNum">土地招商</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 产业类别 -->
  <div class="zhCategory">
    <div class="itemTitle">
      <div class="itemTitleLeft">
        <div class="kong"></div>
        <span class="itemName">产业类别</span>
      </div>
      <!-- 跳转全部 -->
      <div class="itemTitleRight">
        <span class="itemAll">全部</span>
        <img src="../img/right.svg" alt="" />
      </div>
    </div>
    <div class="bigItemContent">
      <div id="wp3" style="height: 50px; width: 50px"></div>
      <div class="bigItemContents">
        <div class="bigItemNum">6</div>
        <div class="bigItemNums">
          <div class="bigItemColor1 bigItemColor"></div>
          <div class="bigItemColorNum">现代农业</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">8</div>
        <div class="bigItemNums">
          <div class="bigItemColor2 bigItemColor"></div>
          <div class="bigItemColorNum">生物产业</div>
        </div>
      </div>
      <div class="bigItemContents">
        <div class="bigItemNum">11</div>
        <div class="bigItemNums">
          <div class="bigItemColor3 bigItemColor"></div>
          <div class="bigItemColorNum">畜牧业</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部导航 -->
  <div class="itemTabBar">
    <div class="tabBar">
      <a href="./index.html">
        <img src="../img/home1.svg" alt="" />
        <span style="color: #36bf1b">首页</span>
      </a>
    </div>
    <div class="tabBar">
      <a href="./1.html">
        <img src="../img/shipin.svg" alt="" />
        <span>视频调度</span>
      </a>
    </div>
    <div class="tabBar">
      <a href="./2.html">
        <dotlottie-player autoplay controls loop mode="normal" src="../svg/jiashicang.lottie"
          style="width: 24px; height: 24px; overflow: hidden; margin: 0 auto"></dotlottie-player>
        <span>领导直通车</span>
      </a>
    </div>
    <div class="tabBar">
      <a href="./3.html">
        <img src="../img/tousu.svg" alt="" />
        <span>营商环境投诉</span>
      </a>
    </div>
    <div class="tabBar">
      <a href="./4.html">
        <img src="../img/my.svg" alt="" />
        <span>我的</span>
      </a>
    </div>
  </div>
  <div class="itemTabBar-kong"></div>
</body>

</html>
<script src="../js/base.js"></script>
<script src="../js/jquery.min.js"></script>
<script type="module" src="../js/dotlottie-player.js"></script>
<script src="../js/echarts.min.js
"></script>

<script type="text/javascript">
  var loader = document.getElementById('loader');
  //-----------------------------------------------------------------------
  // Page Loader
  //----------------------------------------------------------------------
  setTimeout(() => {
    loader.setAttribute("style", "pointer-events: none; opacity: 0; transition: 0.2s ease-in-out;");
    setTimeout(() => {
      loader.setAttribute("style", "display: none;")
    }, 1000);
  }, 450);
  //-----------------------------------------------------------------------



  var myChart = echarts.init(document.getElementById("main"));
  window.addEventListener("resize", function () {
    myChart.resize();
  });

  // 指定图表的配置项和数据
  var option = {
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "环形统计图",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 75, name: "" },
          { value: 25, name: "" },
          { value: 5, name: "" },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  var chartDom = document.getElementById("wp1");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "环形统计图",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 49, name: "" },
          { value: 51, name: "" },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
  var chartDom = document.getElementById("wp2");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "环形统计图",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 49, name: "" },
          { value: 51, name: "" },
          { value: 51, name: "" },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
  var chartDom = document.getElementById("wp3");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "环形统计图",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 49, name: "" },
          { value: 51, name: "" },
          { value: 51, name: "" },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
</script>